<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/page.css">
</head>
<body>
<div class="peo_admin_header">
    <div class="peo_title">七星农场科研管理平台</div>
    <div class="peo_tab ">
        <span>
           科研课题列表
        </span>
        <span class="active">
           科研人员列表
        </span>
    </div>
    <div></div>
</div>
<div class="peo_content">
    <div class="nav">
        <span class="nav_left">科研人员列表</span><span>  /  科研人员列表  /  专家浏览</span>
    </div>
    <div class="peo_con">
        <div class="peo_search">
            <span>科研人员姓名</span>
            <input placeholder="请输入名称">
            <span>科研人员级别</span>
            <select>
                <option style="display: none;" disabled selected>请选择</option>
            </select>
            <span>专家类型</span>
            <select>
                <option style="display: none;" disabled selected>请选择</option>
            </select>
            <span class="peo_search_btn">查询</span>
        </div>
        <div class="peo_imgs">
            <div class="peo_imgs_outer">
                <div class="peo_items">
                    <div class="peo_item_top">
                        <img src="">
                        <div class="peo_names">
                            <div>
                                <p>姓名：<i class="text_blod">许晓结</i></p>
                                <p>级别：<i class="text_blod">书记</i></p>
                                <p>类型：<i class="text_blod">政工程</i></p>
                            </div>
                            <span class="peo_btn flex_end">查看详情</span>
                        </div>
                    </div>
                    <div class="peo_item_bto">
                        <span>擅长领域：</span>
                        <span class="text_green">详情…</span>
                    </div>
                </div>
                <div class="peo_items">
                    <div class="peo_item_top">
                        <img src="">
                        <div class="peo_names">
                            <div>
                                <p>姓名：<i class="text_blod">许晓结</i></p>
                                <p>级别：<i class="text_blod">书记</i></p>
                                <p>类型：<i class="text_blod">政工程</i></p>
                            </div>
                            <span class="peo_btn flex_end">查看详情</span>
                        </div>
                    </div>
                    <div class="peo_item_bto">
                        <span>擅长领域：</span>
                        <span class="text_green">详情…</span>
                    </div>
                </div>
                <div class="peo_items">
                    <div class="peo_item_top">
                        <img src="">
                        <div class="peo_names">
                            <div>
                                <p>姓名：<i class="text_blod">许晓结</i></p>
                                <p>级别：<i class="text_blod">书记</i></p>
                                <p>类型：<i class="text_blod">政工程</i></p>
                            </div>
                            <span class="peo_btn flex_end">查看详情</span>
                        </div>
                    </div>
                    <div class="peo_item_bto">
                        <span>擅长领域：</span>
                        <span class="text_green">详情…</span>
                    </div>
                </div>
                <div class="peo_items">
                    <div class="peo_item_top">
                        <img src="">
                        <div class="peo_names">
                            <div>
                                <p>姓名：<i class="text_blod">许晓结</i></p>
                                <p>级别：<i class="text_blod">书记</i></p>
                                <p>类型：<i class="text_blod">政工程</i></p>
                            </div>
                            <span class="peo_btn flex_end">查看详情</span>
                        </div>
                    </div>
                    <div class="peo_item_bto">
                        <span>擅长领域：</span>
                        <span class="text_green">详情…</span>
                    </div>
                </div>
                <div class="peo_items">
                    <div class="peo_item_top">
                        <img src="">
                        <div class="peo_names">
                            <div>
                                <p>姓名：<i class="text_blod">许晓结</i></p>
                                <p>级别：<i class="text_blod">书记</i></p>
                                <p>类型：<i class="text_blod">政工程</i></p>
                            </div>
                            <span class="peo_btn flex_end">查看详情</span>
                        </div>
                    </div>
                    <div class="peo_item_bto">
                        <span>擅长领域：</span>
                        <span class="text_green">详情…</span>
                    </div>
                </div>
                <div class="peo_items">
                    <div class="peo_item_top">
                        <img src="">
                        <div class="peo_names">
                            <div>
                                <p>姓名：<i class="text_blod">许晓结</i></p>
                                <p>级别：<i class="text_blod">书记</i></p>
                                <p>类型：<i class="text_blod">政工程</i></p>
                            </div>
                            <span class="peo_btn flex_end">查看详情</span>
                        </div>
                    </div>
                    <div class="peo_item_bto">
                        <span>擅长领域：</span>
                        <span class="text_green">详情…</span>
                    </div>
                </div>
                <div class="peo_items">
                    <div class="peo_item_top">
                        <img src="">
                        <div class="peo_names">
                            <div>
                                <p>姓名：<i class="text_blod">许晓结</i></p>
                                <p>级别：<i class="text_blod">书记</i></p>
                                <p>类型：<i class="text_blod">政工程</i></p>
                            </div>
                            <span class="peo_btn flex_end">查看详情</span>
                        </div>
                    </div>
                    <div class="peo_item_bto">
                        <span>擅长领域：</span>
                        <span class="text_green">详情…</span>
                    </div>
                </div>
                <div class="peo_items">
                    <div class="peo_item_top">
                        <img src="">
                        <div class="peo_names">
                            <div>
                                <p>姓名：<i class="text_blod">许晓结</i></p>
                                <p>级别：<i class="text_blod">书记</i></p>
                                <p>类型：<i class="text_blod">政工程</i></p>
                            </div>
                            <span class="peo_btn flex_end">查看详情</span>
                        </div>
                    </div>
                    <div class="peo_item_bto">
                        <span>擅长领域：</span>
                        <span class="text_green">详情…</span>
                    </div>
                </div>
            </div>
            <div id="pagination" class="pagination"></div>
        </div>


    </div>

</div>
</body>
<script src="../js/page.js"></script>
<script src="../js/jq.1.9.1.min.js"></script>
<script>
    $(function () {       //点击切换
        $('.peo_tab span').click(function () {
            $('.peo_tab span').removeClass('active')
            $(this).addClass('active')
        })
    })

    //分页
    window.onload = function () {
        new Page({
            id: 'pagination',
            pageTotal: 50, //必填,总页数
            pageAmount: 10,  //每页多少
            dataTotal: 500, //总共多少条数据
            curPage:1, //初始页码,不填默认为1
            pageSize: 5, //分页个数,不填默认为5
            showPageTotalFlag:true, //是否显示数据统计,不填默认不显示
            showSkipInputFlag:true, //是否支持跳转,不填默认不显示
            getPage: function (page) {
                //获取当前页数
                console.log(page);
            }
        })
    }
</script>
</html>